<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<%@ include file="/WEB-INF/views/shared/master/webkitMeta.jsp"%>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>度益科技</title>	
	<%@ include file="/WEB-INF/views/shared/base/css/bootstrap.jsp"%>
	<%@ include file="/WEB-INF/views/shared/base/css/limitless/default/common.jsp"%>
	
	<!-- 测试统计的引入包 -->
	<%@ include file="/WEB-INF/views/shared/base/css/limitless/default/animate.jsp"%>
	
	<%@ include file="/WEB-INF/views/shared/base/scripts/jquery.jsp"%>
	<%@ include file="/WEB-INF/views/shared/base/scripts/common.jsp"%>
	<%@ include file="/WEB-INF/views/shared/base/scripts/bootstrap.jsp"%>
	<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/app.jsp"%>
	<script type="text/javascript">
		Pace.on("done",function(){
			var pageLoader=document.getElementsByClassName("pageLoader")[0];
			var pageLoading=document.getElementsByClassName("pageLoading")[0];
			pageLoader.style.visibility=false;
			pageLoading.style.display="none";
		});
	</script>
	<script type="text/javascript">
		$(function(){
			$("body").click(function(){
				if(!$.isNull(top.clearAria)){
					top.clearAria();	
				}
			});
		});
	</script>
</head>

<body style="margin:20px 20px 10px 20px;">
<div class="pageLoading" style="width:100%;padding-bottom: 1000px;">
	<div style="width:80px;height:80px;margin: 50px auto 0px;">
		<img alt="loading..." src="<c:url value='/images/loading/loading.gif' />">
	</div>
</div>
<div class="pageLoader" style="visibility: true;">
<h1>欢迎<span style="color:#20aefc">${name}</span>登录普天永利后台管理系统</h1>

<div class="panel panel-flat">
	<div class="panel-heading">
		<h6 class="panel-title text-semibold">每日的关注人数</h6>
		<div class="heading-elements">
			<ul class="icons-list">
              		<li><a data-action="collapse"></a></li>
              		<li><a data-action="reload"></a></li>
              		<li><a data-action="close"></a></li>
              	</ul>
             	</div>
	</div>

	<div class="panel-body">
		<div class="chart-container">
			<div class="chart" style="height:400px;width:1000px;;" id="attention"></div>
		</div>
	</div>
</div>



<div class="panel panel-flat">
	<div class="panel-heading">
		<h6 class="panel-title text-semibold">每日加入初、高创的人数</h6>
		<div class="heading-elements">
			<ul class="icons-list">
              		<li><a data-action="collapse"></a></li>
              		<li><a data-action="reload"></a></li>
              		<li><a data-action="close"></a></li>
              	</ul>
             	</div>
	</div>

	<div class="panel-body">
		<div class="chart-container">
			<div class="chart" style="height:400px;width:1000px;;" id="joinHighMaker"></div>
		</div>
	</div>
</div>



<div class="panel panel-flat">
	<div class="panel-heading">
		<h6 class="panel-title text-semibold">每日车险、非车险成交量</h6>
		<div class="heading-elements">
			<ul class="icons-list">
              		<li><a data-action="collapse"></a></li>
              		<li><a data-action="reload"></a></li>
              		<li><a data-action="close"></a></li>
              	</ul>
             	</div>
	</div>

	<div class="panel-body">
		<div class="chart-container">
			<div class="chart" style="height:400px;width:1000px;;" id="insuranceNum"></div>
		</div>
	</div>
</div>


<div class="panel panel-flat">
	<div class="panel-heading">
		<h6 class="panel-title text-semibold">每日车险(商业险)、非车险成交金额</h6>
		<div class="heading-elements">
			<ul class="icons-list">
              		<li><a data-action="collapse"></a></li>
              		<li><a data-action="reload"></a></li>
              		<li><a data-action="close"></a></li>
              	</ul>
             	</div>
	</div>

	<div class="panel-body">
		<div class="chart-container">
			<div class="chart" style="height:400px;width:1000px;;" id="insuranceMoney"></div>
		</div>
	</div>
</div>
<!-- 引入echarts的js包 -->
<%@ include file="/WEB-INF/views/shared/base/scripts/echarts/3.8.4/echarts.jsp"%>
<script type="text/javascript">
$(function(){
	 
	var url = $.getVirtualPath()+ "/admin/insu/insurance/allCust?state=attentionDate";
	var mp = $.getJsonPost(url);

	/* alert(insurances.length); */
	var names=[];
	var values=[];
	
	   $.each(mp, function(key, value) {
	         
	         names.push(key);
	         values.push(value);
	     }); 
	
 /* $.each(insurances,function(index,insurance){

		names.push(insurance.insuranceName);
		values.push(insurance.minPremium);
	}); */
 
	var myChart = echarts.init($("#attention").get(0));

	// 指定图表的配置项和数据
	/* var option = {
	    title: {
	        text: 'ECharts 入门示例'
	    },
	    tooltip: {},
	    legend: {
	        data:['销量']
	    },
	    xAxis: {  
	        data: names
	    },
	    yAxis: {},
	    series: [{
	        name: '销量',
	        type: 'line',
	        data: values
	    }]
	}; */
	var option = {
            tooltip : {  //提示框
                trigger: 'axis',  //触发类型(坐标轴触发)
                alwaysShowContent:false,  //是否永远显示提示框的内容
                backgroundColor:'rgba(32,174,252,0.7)', //提示框的背景颜色
                textStyle:{  //提示框浮层的文本样式


                },
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    name:'(号)',        //X轴名称单位
                    nameLocation:'end', //名称的位置
                    nameTextStyle:{     //名称的样式
                        color:'#999',
                        fontSize:'12px'
                    },
                    nameGap:0,  //名称与X轴的距离
                    boundaryGap: true,//坐标的刻度是否在中间
                    min:'1',//坐标轴刻度最小值
                    max:'dataMax', //坐标轴刻度的最大值
                    axisLine:{//坐标轴线条相关设置(颜色等)
                        lineStyle:{
                            color:'#ccc'
                        }
                    },
                    axisTick:{ //坐标轴刻度相关设置
                        length:'0' //我把长度设置成0了
                    },
                    axisLabel:{ //坐标轴刻度标签
                        margin:7, //刻度标签与轴线之间的距离
                        textStyle:{
                            color:"#999",  //坐标轴刻度文字的颜色
                            fontSize:'12px' //坐标轴刻度文字的大小
                        }
                    },
                    data : names

                }
            ],//X轴设置
            yAxis : [
                {
                    type : 'value', //类型数值轴
                    name:'(人)',    //坐标轴名称
                    nameTextStyle:{     //名称的样式
                        color:'#999',
                        fontSize:'12px'
                    },
                    nameGap:10,  //名称与Y轴的距离
                    axisTick:{ //坐标轴刻度相关设置
                        length:'0' //我设置成0了
                    },
                    axisLine:{//坐标轴线条相关设置(颜色等)
                        lineStyle:{
                            color:'#ccc'
                        }
                    },
                    axisLabel:{//坐标轴标签相关设置,距离颜色等
                        margin:7,
                        //formatter: '{value} °C',//标签内容内置的格式转化器比如这个表示在后面加一个c
                        textStyle:{
                            color:"#999",  //坐标轴刻度文字的颜色
                            fontSize:'12px' //坐标轴刻度文字的大小
                        },
                    },
                    splitLine:{    //坐标轴分隔线。默认数值轴显示，类目轴不显示。
                        show:false
                    }
                }
            ],
            grid:{ //直角坐标系内绘图网格
                left:36  //由于1000显示被挡住了,所以我让他左移36px;这个功能类似于paddingleft
            },
            series : [  //系列列表
                {
                    name:'人',   //系列名称 用于tooltip的显示
                    type:'line',
                    data:values,
                    itemStyle:{  //折线拐点的样式
                        normal:{
                            color:'#20aefc',  //折线拐点的颜色
                        }
                    },
                    lineStyle:{  //线条的样式
                        normal:{
                            color:'#20aefc',  //折线颜色
                        }
                    },
                    areaStyle:{ //区域填充样式
                        normal:{
                            //线性渐变
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: '#b1e3fe' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#fff' // 100% 处的颜色
                            }], false)
                        }
                    },
                    markPoint : { //图标标注
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }

            ]
        };
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
});


/* ------------------------------------------------------------- */
 $(function(){
	 
	 var url = $.getVirtualPath()+ "/admin/insu/insurance/allCust?state=joinMakerDate";
	 var mp = $.getJsonPost(url);
	 var url = $.getVirtualPath()+ "/admin/insu/insurance/allCust?state=joinHighMakerDate";
	 var map = $.getJsonPost(url);
		/* alert(insurances.length); */
	 var names=[];
	 var values1=[]; 
	 var values2=[];
		 $.each(mp, function(key, value) {
		         
		         names.push(key);
		         values1.push(value);
		     });  
			
			   $.each(map, function(key, value) {
 			         values2.push(value);
			     });
			   
	 var myChart = echarts.init($("#joinHighMaker").get(0 ));
	 
	 var option = {
			   /*  title: {
			        text: '测试看看',
			        subtext: '测试玩玩'
			    }, */
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['当月每日加入初创数','当月每日加入高创数']
			    },
			    toolbox: {
			        show: true,
			        feature: {
			            dataZoom: {
			                yAxisIndex: 'none'
			            },
			            dataView: {readOnly: false},
			            magicType: {type: ['line', 'bar']},
			            restore: {},
			            saveAsImage: {}
			        }
			    },
			    xAxis:  {
			        type: 'category',
			        boundaryGap: false,
			        data: names
			    },
			    yAxis: {
			        type: 'value',
			        axisLabel: {
			            formatter: '{value} '
			        }
			    },
			    series: [
			        {
			            name:'每日加入初创数',
			            type:'line',
			            data:values1,
			            markPoint: {
			                data: [
			                    {type: 'max', name: '最大值'},
			                    {type: 'min', name: '最小值'}
			                ]
			            },
			            markLine: {
			                data: [
			                    {type: 'average', name: '平均值'}
			                ]
			            }
			        },
			        {
			            name:'每日加入高创数',
			            type:'line',
			            data:values2,
			            lineStyle:{  //线条的样式
	                        normal:{
	                            color:'#20aefc',  //折线颜色
	                        }
	                    },
	                    itemStyle:{  //折线拐点的样式
	                        normal:{
	                            color:'#20aefc',  //折线拐点的颜色
	                        }
	                    },
			            markPoint: {
			                data: [
			                    {type: 'max', name: '最大值'},
			                    {type: 'min', name: '最小值'}
			                ]
			            },
			            markLine: {
			                data: [
			                    {type: 'average', name: '平均值'},
			                    [{
			                        symbol: 'none',
			                        x: '90%',
			                        yAxis: 'max'
			                    }, {
			                        symbol: 'circle',
			                        label: {
			                            normal: {
			                                position: 'start',
			                                formatter: '最大值'
			                            }
			                        },
			                        type: 'max',
			                        name: '最高点'
			                    }]
			                ]
			            }
			        }
			    ]
			};
	 myChart.setOption(option);
 });


 /* ---------------------------------------------------------------------- */
 $(function(){
	 
	 var url = $.getVirtualPath()+ "/admin/insu/insurance/insurance?state=notcar";
	 var mp = $.getJsonPost(url);
	 var url = $.getVirtualPath()+ "/admin/insu/insurance/insurance?state=car";
	 var map = $.getJsonPost(url);
		/* alert(insurances.length); */
	 var names=[];
	 var values1=[]; 
	 var values2=[];
		 $.each(mp, function(key, value) {
		         
		         names.push(key);
		         values1.push(value);
		     });  
			
			   $.each(map, function(key, value) {
 			         values2.push(value);
			     });
			   
	 var myChart = echarts.init($("#insuranceNum").get(0 ));
	 
	 var option = {
			   /*  title: {
			        text: '测试看看',
			        subtext: '测试玩玩'
			    }, */
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['每日非车险成交量','每日车险成交量']
			    },
			    toolbox: {
			        show: true,
			        feature: {
			            dataZoom: {
			                yAxisIndex: 'none'
			            },
			            dataView: {readOnly: false},
			            magicType: {type: ['line', 'bar']},
			            restore: {},
			            saveAsImage: {}
			        }
			    },
			    xAxis:  {
			        type: 'category',
			        boundaryGap: false,
			        data: names
			    },
			    yAxis: {
			        type: 'value',
			        axisLabel: {
			            formatter: '{value} '
			        }
			    },
			    series: [
			        {
			            name:'每日非车险成交量',
			            type:'line',
			            data:values1,
			            markPoint: {
			                data: [
			                    {type: 'max', name: '最大值'},
			                    {type: 'min', name: '最小值'}
			                ]
			            },
			            markLine: {
			                data: [
			                    {type: 'average', name: '平均值'}
			                ]
			            }
			        },
			        {
			            name:'每日车险成交量',
			            type:'line',
			            data:values2,
			            lineStyle:{  //线条的样式
	                        normal:{
	                            color:'#20aefc',  //折线颜色
	                        }
	                    },
	                    itemStyle:{  //折线拐点的样式
	                        normal:{
	                            color:'#20aefc',  //折线拐点的颜色
	                        }
	                    },
			            markPoint: {
			                data: [
			                    {type: 'max', name: '最大值'},
			                    {type: 'min', name: '最小值'}
			                ]
			            },
			            markLine: {
			                data: [
			                    {type: 'average', name: '平均值'},
			                    [{
			                        symbol: 'none',
			                        x: '90%',
			                        yAxis: 'max'
			                    }, {
			                        symbol: 'circle',
			                        label: {
			                            normal: {
			                                position: 'start',
			                                formatter: '最大值'
			                            }
			                        },
			                        type: 'max',
			                        name: '最高点'
			                    }]
			                ]
			            }
			        }
			    ]
			};
	 myChart.setOption(option);
 });
 
 /* ---------------------------------------------------------------------- */
 $(function(){
	 
	 var url = $.getVirtualPath()+ "/admin/insu/insurance/insuranceMoney?state=notcar";
	 var mp = $.getJsonPost(url);
	 var url = $.getVirtualPath()+ "/admin/insu/insurance/insuranceMoney?state=car";
	 var map = $.getJsonPost(url);
		/* alert(insurances.length); */
	 var names=[];
	 var values1=[]; 
	 var values2=[];
		 $.each(mp, function(key, value) {
		         
		         names.push(key);
		         values1.push(value);
		     });  
			
			   $.each(map, function(key, value) {
 			         values2.push(value);
			     });
			   
	 var myChart = echarts.init($("#insuranceMoney").get(0 ));
	 
	 var option = {
			   /*  title: {
			        text: '测试看看',
			        subtext: '测试玩玩'
			    }, */
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['每日非车险成金额','每日车险成金额']
			    },
			    toolbox: {
			        show: true,
			        feature: {
			            dataZoom: {
			                yAxisIndex: 'none'
			            },
			            dataView: {readOnly: false},
			            magicType: {type: ['line', 'bar']},
			            restore: {},
			            saveAsImage: {}
			        }
			    },
			    xAxis:  {
			        type: 'category',
			        boundaryGap: false,
			        data: names
			    },
			    yAxis: {
			        type: 'value',
			        axisLabel: {
			            formatter: '{value} '
			        }
			    },
			    series: [
			        {
			            name:'每日非车险成交金额',
			            type:'line',
			            data:values1,
			            markPoint: {
			                data: [
			                    {type: 'max', name: '最大值'},
			                    {type: 'min', name: '最小值'}
			                ]
			            },
			            markLine: {
			                data: [
			                    {type: 'average', name: '平均值'}
			                ]
			            }
			        },
			        {
			            name:'每日车险成交金额',
			            type:'line',
			            data:values2,
			            lineStyle:{  //线条的样式
	                        normal:{
	                            color:'#20aefc',  //折线颜色
	                        }
	                    },
	                    itemStyle:{  //折线拐点的样式
	                        normal:{
	                            color:'#20aefc',  //折线拐点的颜色
	                        }
	                    },
			            markPoint: {
			                data: [
			                    {type: 'max', name: '最大值'},
			                    {type: 'min', name: '最小值'}
			                ]
			            },
			            markLine: {
			                data: [
			                    {type: 'average', name: '平均值'},
			                    [{
			                        symbol: 'none',
			                        x: '90%',
			                        yAxis: 'max'
			                    }, {
			                        symbol: 'circle',
			                        label: {
			                            normal: {
			                                position: 'start',
			                                formatter: '最大值'
			                            }
			                        },
			                        type: 'max',
			                        name: '最高点'
			                    }]
			                ]
			            }
			        }
			    ]
			};
	 myChart.setOption(option);
 });

</script>
</body>
</html>
